<template>
  <div id="app">
    <transition :name="transitionName">
     <router-view></router-view>
    </transition>
    <!-- <tabar-ele></tabar-ele> -->
  </div>
</template>
<script>
// 移动端点击事件`click`不生效,需要使用`fastclick`插件解决
import FastClick from 'fastclick'
// import tabarEle from './components/table.vue'

export default {
  data() {
    return {
      transitionName: 'slide-right'
    }
  },
  components:{
    // tabarEle
  },
  created() {
    // this.seachtoken()
    // 处理页面刷新之后的状态
    // console.log('=========> 初次加载 <=================');
    // 判断 用户是否登录
    if (this.$store.getters.getIsLogin) {
      // 已登录 刷新之后 获取用户信息
      this.$store.dispatch('getInfo')
      this.$store.dispatch('getCartData')
    }

  },
  
  watch: {
    $route: function (newValue, oldValue) {
      // console.log("newValue:", newValue);
      // console.log("oldValue:", oldValue);

      // console.log('this:', this);

      if (newValue.meta.index < oldValue.meta.index) {
        // console.log('向右的动画');
        this.transitionName = 'slide-right'
      } else if (newValue.meta.index > oldValue.meta.index) {
        // console.log('向左的动画');
        this.transitionName = 'slide-left'
      } else {
        // console.log('同等级页面切换');
        this.transitionName = ''
      }
    },
  },
  mounted() {
    //解决移动端点击300ms延时
    FastClick.attach(document.body);
  },
  methods:{
    // seachtoken(){
    //   if(sessionStorage.getItem('isLogin')){
    //     this.$router.push('/login')
    //   }
    // }
  }
};
</script>

<style lang="scss">
// .aniLeft-enter,
// .aniLeft-leave-to {
//   opacity: 0;
//   transform: translateX(100%);
// }

// .aniLeft-enter-active,
// .aniLeft-leave-active {
//   transition: all 0.5s ease;
// }

#app {
    width: 100%;
    max-width: 800px;
    height: 100%;
    margin: 0 auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    left: 0;
    top: 0;
}

/*切换样式出错处理*/
.router-view {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}

  /*切换动画*/
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
      height: 100%;
      will-change: transform;
      transition: all 800ms;
      position: absolute;
      backface-visibility: hidden;
  }

.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

</style>

